<template>
    <el-col :span="24">

        <el-divider content-position="center"><span class='text-oneLine'>通信状态</span></el-divider>

        <repeater-fiber-status></repeater-fiber-status>

        <submersible-fiber-status></submersible-fiber-status>

        <el-divider content-position="center"><span class='text-oneLine'>推进器(垂直)</span></el-divider>

        <thruster-vert></thruster-vert>

        <el-divider content-position="center"><span class='text-oneLine'>推进器(水平)</span></el-divider>

        <ThrusterHori></ThrusterHori>

        <el-divider content-position="center"><span class='text-oneLine'>侧翼</span></el-divider>

        <left-wing></left-wing>
        <right-wing></right-wing>

        <el-divider content-position="center"><span class='text-oneLine'>漏水检测</span></el-divider>

        <water-leak-force></water-leak-force>
        <water-leak-weak></water-leak-weak>
        <water-leak-battery></water-leak-battery>

<!--        <el-divider content-position="center"><span class='text-oneLine'>部件状态</span></el-divider>-->

<!--        <light-status></light-status>-->
<!--        <magnet-status></magnet-status>-->

    </el-col>
</template>

<script>

import ThrusterVert from '@/components/common/thrusters/ThrusterVert';
import ThrusterHori from '@/components/common/thrusters/ThrusterHori';
import LeftWing from '@/components/common/Wings/LeftWing';
import RightWing from '@/components/common/Wings/RightWing';
import WaterLeakBattery from '@/components/common/WaterLeak/WaterLeakBattery';
import WaterLeakForce from '@/components/common/WaterLeak/WaterLeakForce';
import WaterLeakWeak from '@/components/common/WaterLeak/WaterLeakWeak';
import LightStatus from '@/components/common/status/LightStatus';
import MagnetStatus from '@/components/common/status/MagnetStatus';
import RepeaterFiberStatus from '@/components/common/status/RepeaterFiberStatus';
import SubmersibleFiberStatus from '@/components/common/status/SubmersibleFiberStatus';

export default {
    name: "CorrespondenceStatus",
    components : {
        SubmersibleFiberStatus,
        RepeaterFiberStatus,
        ThrusterHori,
        ThrusterVert,
        LeftWing,
        RightWing,
        WaterLeakBattery,
        WaterLeakForce,
        WaterLeakWeak,
        LightStatus,
        MagnetStatus
    }
}
</script>

<style scoped>
.el-row{
    padding: 10px;
}
.el-button{
    width: 32px;
    height: 32px;
    margin: auto auto;
}
.label{
    margin: auto auto;
}

/* el-divider 修改高度&虚线效果 */
.el-divider {
    background-color: #b6d7fb;
    height: 2px;
}
>>> .el-divider__text{
    background-color: transparent;
    color: #e8eaec;
}
>>> .el-divider--horizontal {
    background-color: transparent;
    /*margin: 8px 0;*/
    /*background: 0 0;*/
    border-top: 1px solid gray;
}
/*一般的文字截断(适用于内联与块)：*/
/*@author zhenyuya <zhenyuya@163.com>*/
.text-oneLine{
    display:block;            /*内联对象需加*/
    word-break:keep-all;      /* 不换行 */
    white-space:nowrap;       /* 不换行 */
    overflow:hidden;          /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;   /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
    color: #e8eaec;
    background-color: #2a2929;
}
</style>
